<template>
  <div class="record">
    <!-- 顶部 -->
    <div class="bar">
      <div class="barLeft" @click="gooff">
        <van-icon name="arrow-left" />
      </div>
      <div class="barReft">
        <span>播放记录</span>
      </div>
    </div>
    <!-- 浏览内容 -->

    <van-swipe-cell v-for="(item, index) in record[1]" :key="index">
      <van-card
        :desc="item.text2"
        :title="item.text1"
        class="goods-card records"
        :thumb="item.img"
      />
      <template #right>
        <van-button
          square
          text="删除"
          type="danger"
          class="delete-button"
          @click="del(index)"
        />
      </template>
    </van-swipe-cell>
  </div>
</template>


<script>
export default {
  data() {
    return {
      lbarr: [
        {
          id: 1,
          img: require("../assets/img/rb001.jpg"),
          images1: require("../assets/img/db.png"),
          text1: "青春创世纪",
          text2: "黄景瑜昊谨言吻戏解锁新糖",
          text3: "更新至46集",
        },
        {
          id: 2,
          img: require("../assets/img/rb002.jpg"),
          images1: require("../assets/img/vip.gif"),
          text1: "鹿鼎记",
          text2: "看全集!韦小宝金蝉脱壳",
          text3: "45集全",
        },
        {
          id: 3,
          img: require("../assets/img/rb003.jpg"),
          images1: require("../assets/img/zz.gif"),
          text1: "青春创世纪",
          text2: "黄景瑜昊谨言吻戏解锁新糖",
          text3: "更新至46集",
        },
        {
          id: 4,
          img: require("../assets/img/rb004.jpg"),
          images: require("../assets/img/vip.gif"),
          text1: "狼殿下",
          text2: "王大陆霸总附体O甜度百分",
          text3: "49集全",
        },
      ],
      record: [],
    };
  },
  mounted() {
    // 缓存处理
    // 拿数组下标获取数据

    // 退出数值绚烂登入获取
    // var cart = localStorage.getItem("cart");
    // cart = JSON.parse(cart);

    // this.record = cart.video;
    // console.log(cart1.video);

    
    var index = localStorage.getItem("lbarr");

    // 判断是否为空
    if(index == null) {
      console.log(1);
    } else {
        var videoObj = this.lbarr[index];
    // console.log(videoObj);
    this.record.push(videoObj)
      // 判断缓存数据是否为空
      var video = localStorage.getItem("video") || [];
      // video = JSON.parse(video)
      console.log(video);
      
      // 判断长度是否为0，不为0时追加
      console.log(video.length);
      if (video.length == 0) {
        console.log(111)
        // 把数据放在数组押入缓存
        video.push(videoObj);
        // this.record.push(videoObj);
        console.log(1);
        localStorage.setItem("video", JSON.stringify(video));
         
        console.log(localStorage.getItem("video"));
      } else {
        video = JSON.parse(video);
        console.log(video);


        //判断数据是否相同
        var videoOn = video.some((item,index) => {
          console.log(item.id);
          // 匹配当前id与传过来的id值一样时
          return item.id == videoObj.id;
        });

        if (videoOn) {
          console.log(1);
        } else {
          console.log('0000')
          // 当产品不一样时，进行push追加
          video.push(videoObj);
          // console.log(video)
          // this.record.push(videoObj);
          localStorage.setItem("video", JSON.stringify(video));
        }
        
      }
      console.log(typeof video);
      this.record.push(video);
      console.log(this.record[1])
    }
   

  },

  methods: {
    gooff() {
      this.$router.go(-1);
    },
    del(index) {
      this.record.splice(index, 1);
    },
  },
};
</script>
<style scoped>
.bar {
  display: block;
  height: 0.66rem;
  width: 100%;
  background-image: linear-gradient(
    90deg,
    rgb(26, 46, 74) 0rem,
    rgb(64, 152, 144) 100%
  );
}
.barLeft {
  float: left;
  margin-top: 0.12rem;
  width: 10%;
  height: 0.54rem;
  text-align: center;
  line-height: 0.3rem;
  font-size: 0.3rem;
  color: #fff;
}
.barReft {
  float: right;
  width: 90%;
  text-align: center;
  line-height: 0.6rem;
}
.barReft span {
  font-size: 20px;
  font-weight: 700;
  color: cyan;
  display: inline-block;
  transform: translateX(-0.18rem);
}

/* 内容 */
.goods-card {
  margin: 0;
  background-color: #fafafa;
}

.delete-button {
  height: 100%;
}
.records .van-card__title {
  font-size: 0.18rem;
  height: 0.2rem;
  margin: 0.03rem 0 0.14rem 0.06rem;
}
.records .van-card__desc {
  font-size: 0.14rem;
  margin-left: 0.06rem;
}
.records {
  margin: 0.02rem 0;
}
</style>